<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <el-card v-for="(item, index) in ruleList"
             :key='item.id'
             shadow="never"
             class="bench-mark-card-item">
      <el-row>
        <el-col :span="23">{{$t('custom.component.gadget.value')}}</el-col>
        <el-col :span="1">
          <i class="el-icon-close"
             style="cursor: pointer;"
             @click="deleteItem(index)"></i>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="item.value.property"
                    size="mini"
                    :placeholder="$t('custom.component.gadget.property')"></el-input>
        </el-col>
        <el-col :span="6">
          <!-- <el-input v-model="item.value.than"
                    size="mini"
                    placeholder="Than"></el-input> -->
          <el-select v-model="item.value.than"
                     :placeholder="$t('custom.component.gadget.than')">
            <el-option v-for="it in thanList"
                       :key="it.value"
                       :label="it.label"
                       :value="it.value"></el-option>
          </el-select>
        </el-col>
        <template v-if="item.value.than === 'notBetween' || item.value.than === 'between'">
          <el-col :span="6">
            <el-input v-model="item.value.betweenMin"
                      size="mini"
                      :placeholder="$t('custom.component.gadget.min')"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="item.value.betweenMax"
                      size="mini"
                      :placeholder="$t('custom.component.gadget.max')"></el-input>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="6">
            <el-input v-model="item.value.value"
                      size="mini"
                      :placeholder="$t('custom.component.gadget.value')"></el-input>
          </el-col>
        </template>
      </el-row>
      <el-row>
        <el-col :span="24">{{$t('custom.component.gadget.format')}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="item.format.property"
                    size="mini"
                    :placeholder="$t('custom.component.gadget.property')"></el-input>
        </el-col>
        <el-col :span="6">
          <!-- <el-input v-model="item.format.fontSize"
                    size="mini"
                    placeholder="Font Size"></el-input> -->
          <el-select v-model="item.format.fontSize"
                     :placeholder="$t('custom.component.gadget.fontSize')">
            <el-option v-for="it in fontSizeList"
                       :key="it.value"
                       :label="it.label"
                       :value="it.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">{{$t('custom.component.gadget.a')}}
          <el-color-picker v-model="item.format.color"
                           size="small"></el-color-picker>
        </el-col>
        <el-col :span="3">{{$t('custom.component.gadget.b')}}
          <el-color-picker v-model="item.format.backgroundColor"
                           size="small"></el-color-picker>
        </el-col>
        <el-col :span="6">
          <div class="example"
               :style="{ 'fontSize': item.format.fontSize, 'color': item.format.color, 'backgroundColor': item.format.backgroundColor }">123.45</div>
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="6">
        <el-button @click="addRuleItem"
                   size="mini"
                   type="text">
          <i class="el-icon-plus"></i>
          {{$t('custom.component.gadget.addCondition')}}
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button @click="getRuleJson"
                   size="mini"
                   type="text">
         {{$t('custom.component.gadget.getJson')}}
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      thanList: [
        {
          label: 'Less Than',
          value: 'lessThan'
        },
        {
          label: 'Less Than Or Equal To',
          value: 'lessThanOrEqualTo'
        },
        {
          label: 'Greater Than',
          value: 'greaterThan'
        },
        {
          label: 'Greater Than Or Equal To',
          value: 'greaterThanOrEqualTo'
        },
        {
          label: 'Equals',
          value: 'equals'
        },
        {
          label: 'Not Equals',
          value: 'notEquals'
        },
        {
          label: 'Between',
          value: 'between'
        },
        {
          label: 'Not Between',
          value: 'notBetween'
        }
      ],
      fontSizeList: [
        {
          label: '10px',
          value: '10px'
        },
        {
          label: '12px',
          value: '12px'
        },
        {
          label: '14px',
          value: '14px'
        },
        {
          label: '16px',
          value: '16px'
        },
        {
          label: '18px',
          value: '18px'
        }
      ],
      ruleList: []
    }
  },
  methods: {
    addRuleItem () {
      this.ruleList.push({
        value: {
          property: null,
          than: null,
          value: null,
          betweenMin: null,
          betweenMax: null
        },
        format: {
          property: null,
          fontSize: null,
          color: null,
          background: null
        }
      })
    },
    getRuleJson () {

    },
    deleteItem (index) {
      this.ruleList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss">
.bench-mark-card-item {
  margin-bottom: 10px;

  .el-card__body {
    padding: 0 16px;
  }

  .example {
    width: 55%;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding-left: 5px;
    border: 1px solid #c0c4cc;
    height: 32px;
  }
}
</style>
